<template>
    <div class="mpage">
        <topnav pageindex="2" :cointype.sync="cointype" pagename="mainpage"></topnav>
        <div class="contentwrap">
            <div class="maincontent">
                <div class="tl">
                    <span class="tl_word">{{cointype.toUpperCase()}}矿池统计</span>
                </div>
                <div class="poolstat">
                    <h3 class="tit">矿池状态</h3>
                    <div class="mainstat">
                        <div class="cardwrap">
                            <div class="eachcard">
                                <el-card>
                                    <div class="stat_title">总算力</div>
                                    <div class="stat_data">{{poolstat.allHrate}}</div>
                                </el-card>
                            </div>
                            <div class="eachcard" v-if="poolstat.ppsHrate!==undefined">
                                <el-card>
                                    <div class="stat_title">PPS算力</div>
                                    <div class="stat_data">{{poolstat.ppsHrate}}</div>
                                </el-card>
                            </div>
                            <div class="eachcard" v-if="(poolstat.pplnsHrate!==undefined)&&(cointype.toLowerCase()!='xwc')">
                                <el-card>
                                    <div class="stat_title">PPLNS算力</div>
                                    <div class="stat_data">{{poolstat.pplnsHrate}}</div>
                                </el-card>
                            </div>
                            <div v-if="cointype.toLowerCase()!='sc'"></div>
                            <div class="eachcard">
                                <el-card>
                                    <div class="stat_title">在线矿工数量</div>
                                    <div class="stat_data">{{poolstat.minerCount}}</div>
                                </el-card>
                            </div>
                            <div class="eachcard" v-if="poolstat.workerCount!==undefined">
                                <el-card>
                                    <div class="stat_title">矿机总数</div>
                                    <div class="stat_data">{{poolstat.workerCount}}</div>
                                </el-card>
                            </div>
                            <div class="eachcard" v-if="cointype.toLowerCase()!='xwc'">
                                <el-card>
                                    <div class="stat_title">挖到总块数</div>
                                    <div class="stat_data">{{poolstat.blocksTotal}}</div>
                                </el-card>
                            </div>
                            <div class="eachcard">
                                <el-card>
                                    <div class="stat_title">24小时预估收益</div>
                                    <div class="stat_data">{{poolstat.rewardPer}}<br/>({{cointype.toUpperCase()}}&nbsp;/&nbsp;MH/s)</div>
                                </el-card>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="pooladdrswrap">
                    <h3 class="tit">如何链接我们的矿池&nbsp;({{cointype.toUpperCase()}})</h3>
                    <div><pooladdr :coin="cointype"></pooladdr></div>
                </div>
                <div class="statcharts">
                    <h3 class="tit">矿池总算力</h3>
                    <div class="mainchart">
                        <div id="ratechart"></div>
                    </div>
                </div>
                <div class="digdetail wbg">
                    <h3 class="tit">支付列表</h3>
                    <div class="digwrap">
                        <el-table
                            :data="payData"
                            stripe>
                            <el-table-column
                                prop="payTime"
                                label="时间"
                                class-name="width15">
                            </el-table-column>
                            <el-table-column
                                prop="payamount"
                                label="支付金额"
                                class-name="width15">
                            </el-table-column>
                            <el-table-column
                                label="矿工地址"
                                class-name="width35">
                                <template scope="scope">
                                    <a target="_blank" :href="scope.row.paylistUrl">{{scope.row.minerAddr}}</a>
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="Tx ID"
                                class-name="width35">
                                <template scope="scope">
                                    <a target="_blank" :href="scope.row.txaddrUrl">{{scope.row.tx}}</a>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="pager-wrap" v-if="cointype.toLowerCase()!='sc'">
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page.sync="currentPage1"
                            :page-size="20"
                            layout="prev, pager, next, jumper"
                            :total="totalNum">
                        </el-pagination>
                    </div>
                </div>
                <div class="topminer wbg">
                    <h3 class="tit">Top20 矿工</h3>
                    <div class="minerwrap">
                        <el-table
                            :data="minerData"
                            stripe>
                            <el-table-column
                                label="矿工地址">
                                <template scope="scope">
                                    <span><a :href="'/#/minerpage?cointype='+cointype+'&miner='+scope.row.addr">{{scope.row.addr}}</a></span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="算力">
                                <template scope="scope">
                                    <span>{{api.unitCover(scope.row.hrate)}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="subTime"
                                label="最后一次提交">
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </div>
        <footemp></footemp>
    </div>
</template>
<script>
    import topnav from '@/components/common/topnav.vue';
    import pooladdr from '@/components/common/pooladdr.vue';
    import footemp from "@/components/common/footer.vue";
    import echarts from 'echarts';
    var chart;
    let requrl = {
        eth: {
            stat: "http://eth-api.poolgpu.com/api/stats",
            poolh: "http://eth-api.poolgpu.com/api/history-pool-hr",
            miners: "http://eth-api.poolgpu.com/api/miners",
            payments: "http://eth-api.poolgpu.com/api/payments",
            pagepayments: "http://eth-api.poolgpu.com/api/paging-payments",
            paylist: "https://etherscan.io/address/",
            txurl: "https://etherscan.io/tx/"
        },
        etc: {
            stat: "http://etc-api.poolgpu.com/api/stats",
            poolh: "http://etc-api.poolgpu.com/api/history-pool-hr",
            miners: "http://etc-api.poolgpu.com/api/miners",
            payments: "http://etc-api.poolgpu.com/api/payments",
            pagepayments: "http://etc-api.poolgpu.com/api/paging-payments",
            paylist: "http://gastracker.io/addr/",
            txurl: "http://gastracker.io/tx/"
        },
        exp: {
            stat: "http://exp-api.poolgpu.com/api/stats",
            poolh: "http://exp-api.poolgpu.com/api/history-pool-hr",
            miners: "http://exp-api.poolgpu.com/api/miners",
            payments: "http://exp-api.poolgpu.com/api/payments",
            pagepayments: "http://exp-api.poolgpu.com/api/paging-payments",
            paylist: "http://www.gander.tech/blocks/",
            txurl: "http://www.gander.tech/tx/"
        },
        sc: {
            stat: "http://sia-api.poolgpu.com/api/stats",
            poolh: "http://sia-api.poolgpu.com/api/history-pool-hr",
            miners: "http://sia-api.poolgpu.com/api/miners",
            payments: "http://sia-api.poolgpu.com/api/payments",
            pagepayments: "http://sia.poolgpu.com/api/paging-payments",
            paylist: "https://explore.sia.tech/hash.html?hash=",
            txurl: "https://explore.sia.tech/hash.html?hash="
        },
        xwc: {
            stat: "http://47.75.179.214:8080/api/stats",
            poolh: "http://47.75.179.214:8080/api/history-pool-hr",
            miners: "http://47.75.179.214:8080/api/miners",
            payments: "http://47.75.179.214:8080/api/payments",
            pagepayments: "http://47.75.179.214:8080/api/paging-payments",
            paylist: "http://explorer2.whitecoin.info/address/",
            txurl: "http://explorer2.whitecoin.info/tx/"
        }
    }
    export default {
        data() {
            return {
                cointype: "",
                poolstat: {
                    hrate: "",
                    minerCount: "",
                    blocksTotal: ""
                },
                minerData: [],
                payData: [],
                currentPage1: 1,
                totalNum: 0,
                lastNode: null
            }
        },
        watch: {
            cointype: function(newValue, oldValue) {
                if(!oldValue) return;
                if((newValue.toLowerCase()) != (oldValue.toLowerCase())) {
                    this.initPage();
                }
            }
        },
        methods: {
            createCharts() {
                var that = this;
                var option;
                this.api.get({
                    url:requrl[that.cointype.toLowerCase()].poolh,
                    callback: function(data) {
                        if(data.hasOwnProperty("error")) {
                            return
                        }
                        var ds = {
                            hrate: [],
                            label: []
                        };
                        data.forEach(function(item, idx) {
                            if(that.cointype.toLowerCase() == "sc") {
                                if(idx % 6 == 0) {
                                    ds.hrate.push((item['pool_hashrate']/1000000).toFixed(2));
                                    ds.label.push(that.api.dateFormat(item.timestamp*1000, 'yyyy-MM-dd hh:mm:ss'));
                                }
                            } else {
                                ds.hrate.push((item['pool_hashrate']/1000000).toFixed(2));
                                ds.label.push(that.api.dateFormat(item.timestamp*1000, 'yyyy-MM-dd'));
                            }
                        });
                        if(ds.hrate && ds.hrate.length && (that.lastNode !== null)) {
                            ds.hrate.splice((ds.hrate.length - 1), 1, ((that.lastNode/1000000).toFixed(2)));
                        }
                        option = {
                            tooltip: {
                                trigger: 'axis'
                            },
                            title: {
                                text: '单位（MH）',
                                left: 0,
                                textStyle: {
                                    fontWeight: 'normal',
                                    fontSize: 14
                                }
                            },
                            legend: {
                                icon: 'rect',
                                data: ['总算力'],
                                textStyle: {
                                    fontSize: 12
                                }
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: ds.label,
                                splitNumber: 10,
                                axisLabel: {
                                    show: true
                                },
                                axisTick: {
                                    show: false
                                }
                            },
                            yAxis: {
                                type: 'value',
                                position: 'left',
                                animation: true,
                                splitNumber: 5
                            },
                            series: [{
                                name: '总算力',
                                type: 'line',
                                barMaxWidth: '20',
                                data: ds.hrate,
                                smooth: true,
                                itemStyle: {
                                    normal: {}
                                }
                            }]
                        };
                        chart.setOption(option);
                    }
                });
            },
            initPage: function() {
                let that = this;
                that.payData = [];
                that.currentPage1 = 1;
                that.totalNum = 0;
                that.api.get({
                    url: requrl[that.cointype.toLowerCase()].stat,
                    callback: function(data) {
                        if(data) {
                            that.poolstat.allHrate = that.api.unitCover(data.hashrate);
                            that.lastNode = data.hashrate;
                            if(data.hashratePPS !== undefined) {
                                that.poolstat.ppsHrate = that.api.unitCover(data.hashratePPS);
                            } else {
                                that.poolstat.ppsHrate = undefined;
                            }
                            if(data.hashratePPLNS !== undefined) {
                                that.poolstat.pplnsHrate = that.api.unitCover(data.hashratePPLNS);
                            } else {
                                that.poolstat.pplnsHrate = undefined;
                            }
                            that.poolstat.minerCount = data.minersTotal;
                            that.poolstat.workerCount = data.workersTotal;
                            that.poolstat.blocksTotal = data.maturedTotal;
                            that.poolstat.rewardPer = data.rewardPerM;
                            that.createCharts();
                        }
                    }
                });
                that.api.get({
                    url: requrl[that.cointype.toLowerCase()].payments,
                    callback: function(data) {
                        if(data) {
                            if(that.cointype.toLowerCase() == "sc") {
                                var tempdata = [];
                                var payments = data.payments;
                                for(var i = 0; i < payments.length; i ++) {
                                    tempdata.push({
                                        payamount: ((payments[i].amount/(Math.pow(10,9)))+that.cointype.toUpperCase()),
                                        minerAddr: payments[i].address,
                                        paylistUrl: (requrl[that.cointype.toLowerCase()].paylist+payments[i].address),
                                        tx: payments[i].tx,
                                        txaddrUrl: (requrl[that.cointype.toLowerCase()].txurl+payments[i].tx),
                                        payTime: that.api.dateFormat(parseInt(payments[i].timestamp)*1000, "yyyy-MM-dd hh:mm:ss")
                                    });
                                }
                                that.payData = tempdata;
                            } else {
                                that.totalNum = window.parseInt(data.paymentsTotal);
                            }
                            /*tempdata.sort(function(a, b) {
                                return (b.hrate - a.hrate);
                            });*/
                        }
                    }
                });
                if(that.cointype.toLowerCase() != "sc") that.getPagePayments();
                that.api.get({
                    url: requrl[that.cointype.toLowerCase()].miners,
                    callback: function(data) {
                        if(data) {
                            var tempdata = [];
                            var minersres = data.miners;
                            for(var i in minersres) {
                                tempdata.push({
                                    addr: i,
                                    hrate: minersres[i].hr,
                                    subTime: that.api.dateFormat(parseInt(minersres[i].lastBeat)*1000, "yy-MM-dd hh:mm")
                                });
                            }
                            tempdata.sort(function(a, b) {
                                return (b.hrate - a.hrate);
                            });
                            that.minerData = tempdata.slice(0, 20);
                        }
                    }
                });
            },
            getPagePayments: function() {
                let that = this;
                that.api.get({
                    url: requrl[that.cointype.toLowerCase()].pagepayments,
                    data: {
                        page: (parseInt(that.currentPage1) - 1),
                        pageCount: 20
                    },
                    callback: function(data) {
                        if(data) {
                            var tempdata = [];
                            var payments = data;
                            for(var i = 0; i < payments.length; i ++) {
                                tempdata.push({
                                    payamount: ((payments[i].amount/(Math.pow(10,9)))+that.cointype.toUpperCase()),
                                    minerAddr: payments[i].address,
                                    paylistUrl: (requrl[that.cointype.toLowerCase()].paylist+payments[i].address),
                                    tx: payments[i].tx,
                                    txaddrUrl: (requrl[that.cointype.toLowerCase()].txurl+payments[i].tx),
                                    payTime: that.api.dateFormat(parseInt(payments[i].timestamp)*1000, "yyyy-MM-dd hh:mm:ss")
                                });
                            }
                            /*tempdata.sort(function(a, b) {
                                return (b.hrate - a.hrate);
                            });*/
                            that.payData = tempdata;
                        }
                    }
                });
            },
            handleSizeChange: function() {},
            handleCurrentChange: function() {
                this.getPagePayments();
            }
        },
        beforeMount: function() {
            this.cointype = this.$route.query.cointype.toLowerCase();
        },
        mounted: function() {
            chart = echarts.init(document.getElementById("ratechart"));
            this.initPage();
        },
        components: {
            topnav,
            pooladdr,
            footemp
        }
    }
</script>
<style>
    .mpage .tl .tl_pic {
        display: inline-block;
        width: 50px;
        height: 50px;
        vertical-align: middle;
    }
    .mpage .tl .tl_word {
        display: inline-block;
        vertical-align: middle;
    }
    .mpage .contentwrap {
        min-width: 790px;
    }
    .mpage .contentwrap .maincontent {
        width: 95%;
        margin: 30px auto;
    }
    .mpage .tl {
        text-align: left;
        padding: 10px;
        background-color: #ffffff;
        box-shadow: 1px 1px 1px #ffffff;
        font-size: 26px;
        border: 1px solid #ffffff;
    }
    .mpage .tl_pic {
        background-image: url(../assets/imgs/newtj.png);
        background-size: 100% 100%;
        margin-right: 10px;
    }
    .mpage .poolstat,.mpage .statcharts {
        background-color: #ffffff;
        margin-top: 15px;
    }
    .mpage .tit {
        padding: 15px;
        border-bottom: 1px solid #9c9c9c;
        text-align: left;
        font-size: 16px;
    }
    .mpage .poolstat .mainstat {
        padding: 30px 0px;
    }
    .mpage .poolstat .stat_title {
        padding-bottom: 15px;
        border-bottom: 1px solid #9c9c9c;
        color: #888888;
        font-weight: bold;
    }
    .mpage .poolstat .stat_data {
        padding: 15px;
        font-family: "Arial Black";
        color: #e96b3a;
    }
    .mpage #ratechart {
        width: 98%;
        height: 380px;
        margin: 15px auto 0px auto;
    }
    .mpage .el-table th {
        text-align: center;
    }
    .mpage .minerwrap,.mpage .digwrap {
        padding: 10px;
    }
    .mpage .topminer,.mpage .digdetail {
        margin-top: 15px;
    }
    .mpage .wbg {
        background-color: #ffffff;
    }
    .mpage .digdetail a,.mpage .topminer a {
        color: #276ab0;
        text-decoration: none;
    }
    .mpage .width15 {
        width: 15%;
    }
    .mpage .width35 {
        width: 35%;
    }
    .mpage .cardwrap {
        text-align: center;
    }
    .mpage .cardwrap .eachcard {
        display: inline-block;
        width: 155px;
        font-size: 14px;
        margin-right: 30px;
        word-wrap: break-word;
    }
    .mpage .el-card__body {
        height: 100px;
        padding: 10px;
    }
    .mpage .pooladdrswrap {
        background-color: #ffffff;
        margin-top: 15px;
    }
</style>